<template>
	<view class="home">
		<custom-navbar title="商品列表" :show-back="true" @back="handleBack" />

		<view class="content " :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="search mb37 p0030">
				<view class="box fcc mb30 p016016">
					<up-search shape="square" placeholder="请输入供应产品的名称" v-model="product_name"
						:showAction="false"></up-search>
					<up-button type="primary" @click="getProductName()"
						style="width: 140rpx;height: 60rpx;background: #398DFB;border-radius: 10rpx 10rpx 10rpx 10rpx;"
						text="确定"></up-button>
				</view>
				<view class="flex ">
					<view v-for='(item,index) in data16'>
						<view class="f30bc3" style="margin-right: 67rpx;"
							:class="supply_demand == item.value ? 'c398DFB' :''"
							@click="Switchingsupply_demand(item.value)">
							{{item.label}}
						</view>

					</view>

				</view>
			</view>
			<view class="classify mb28  p0030">
				<view class="flex f24bc9">
					<view v-for="(item,index) in data14">
						<view class="f24bc9" style="margin-right: 57rpx;"
							:class="product_category == item.value ? 'c398DFB' :''"
							@click="Switchingproduct_category(item.value)"> {{item.label}}
						</view>
					</view>
				</view>
			</view>
			<view class="supplyList frw p0030" style="gap: 22rpx;">
				<view class="item" @click="handledetails(item)" v-for="(item,index) in ListData" :key="index">
					<image class="img" :src="item.image"></image>
					<view class="contentBox fcols">
						<view>
							<view class="fc">
								<image class="gong" v-if="item.supply_demand == 19" src="/static/images/home/Frame.svg">
								</image>
								<image class="gong" v-else src="/static/images/home/xu.svg">
								</image>
								<view class="f26bc0 ">
									{{ item.product_name.length > 18 ? item.product_name.slice(0, 18) + '...' : item.product_name }}
								</view>
							</view>
							<view class="f22c9">{{item.product_subtitle}}</view>
						</view>
						<view class="btn f20bcf fcc">
							<view>我要对接</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		SupplyLists
	} from '@/api/supply'
	import {
		getClassification
	} from '@/api/login'
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	// 供需大厅
	// const supplyList = ref([{
	// 		img: '/static/images/supply/Mask.svg',
	// 		gong: '/static/images/home/Frame.svg',
	// 		text: '五大AI爱玛电动车',
	// 		tips: '为爱而生 旗舰而生'
	// 	},
	// 	{
	// 		img: '/static/images/supply/Mask.svg',
	// 		gong: '/static/images/home/Frame.svg',
	// 		text: '五大AI爱玛电动车',
	// 		tips: '为爱而生 旗舰而生'
	// 	},
	// 	{
	// 		img: '/static/images/supply/Mask.svg',
	// 		gong: '/static/images/home/Frame.svg',
	// 		text: '五大AI爱玛电动车',
	// 		tips: '为爱而生 旗舰而生'
	// 	},
	// 	{
	// 		img: '/static/images/supply/Mask.svg',
	// 		gong: '/static/images/home/Frame.svg',
	// 		text: '五大AI爱玛电动车',
	// 		tips: '为爱而生 旗舰而生'
	// 	},
	// ])
	const data14 = ref([])
	const data16 = ref([])
	const loading = ref(false)
	// 并行请求
	const fetchData = async () => {
		try {
			loading.value = true

			const [res14, res16] = await Promise.all([
				getClassification(10),
				getClassification(16)
			])

			data14.value = res14.data
			data16.value = res16.data
			supply_demand.value = data16.value[0].value
			product_category.value = data14.value[0].value
			getSupplyLists()
		} catch (error) {
			console.error('请求失败:', error)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	onMounted(fetchData)
	// 获取list列表
	const ListData = ref([])
	const page = ref(1)
	const limit = ref(10)
	const product_name = ref('')
	const product_category = ref('')
	const supply_demand = ref("")
	const getSupplyLists = async () => {
		try {
			const Res = await SupplyLists(
				'zh', // lang_code
				page.value, // 注意要使用.value
				limit.value,
				product_name.value,
				product_category.value,
				supply_demand.value
			)

			if (Res.code = 200) {
				ListData.value = Res.data.data
			}
			// console.log(Res)
		} catch (error) {
			console.error('获取供需列表失败:', error)
		}
	};

	// 筛选需求供应
	const Switchingsupply_demand = (val) => {
		supply_demand.value = val
		getSupplyLists()
	}
	// 分类 
	const Switchingproduct_category = (val) => {
		product_category.value = val
		getSupplyLists()
	}
	// 搜索名称
	const getProductName = () => {
		getSupplyLists()
	}
	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
	const handledetails = (val) => {
		uni.navigateTo({
			url: `/pages/supply/details?sd_id=${val.sd_id}`
		});
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			display: flex;
			flex-direction: column;
			// align-items: center;
			// justify-content: center;

			.search {
				width: 100%;
				height: 213rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 16rpx 30rpx 0 30rpx;

				.box {
					width: 100%;
					height: 90rpx;
					background: #F3F3F3;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}

			.classify {
				width: 100%;
			}

			.supplyList {
				.item {
					width: 334rpx;

					.img {
						width: 334rpx;
						height: 300rpx;
					}

					.contentBox {
						// width: 334rpx;
						// height: 180rpx;
						background: #FFFFFF;
						border-radius: 0rpx 0rpx 20rpx 20rpx;
						padding: 24rpx 20rpx;
						box-sizing: border-box;

						.gong {
							width: 30rpx;
							height: 30rpx;
						}

						.btn {
							width: 100%;
							height: 50rpx;
							background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
							border-radius: 10rpx 10rpx 10rpx 10rpx;
						}
					}

					.supplyList {
						.item {
							width: 334rpx;

							.img {
								width: 334rpx;
								height: 300rpx;
							}

							.contentBox {
								// width: 334rpx;
								// height: 180rpx;
								background: #FFFFFF;
								border-radius: 0rpx 0rpx 20rpx 20rpx;
								padding: 24rpx 20rpx;
								box-sizing: border-box;

								.gong {
									width: 30rpx;
									height: 30rpx;
								}

								.btn {
									width: 100%;
									height: 50rpx;
									background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
									border-radius: 10rpx 10rpx 10rpx 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>